const cls1 = { opacity: 0.4 };
const cls2 = { fill: "#fff" };
const cls3 = { opacity: 0.8 };
const cls4 = { opacity: 0.2 };
const cls5 = { opacity: 0.6 };

const Performance = ({ fill, className, ...rest }) => (
  <svg
    id="Layer_1"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 550 225"
    className={className}
    {...rest}
  >
    <defs></defs>
    <title>smp-white</title>
    <g id="Gauge-4" data-name="Gauge">
      <g style={cls1}>
        <path style={cls2} d="M123.07,73.31a284,284,0,0,1,31.8-14.4l-2.7-13.3a324.4,324.4,0,0,0-33.5,19Z" />
      </g>
      <g style={cls3}>
        <path
          style={cls2}
          d="M327.77,51.61l27.5-31a314.16,314.16,0,0,0-53.7-6.9l-16,29.2A297.91,297.91,0,0,1,327.77,51.61Z"
        />
      </g>
      <g style={cls1}>
        <path
          style={cls2}
          d="M116.77,76.61l-4-8.1c-8.3,5.7-16.4,11.8-24.1,18.2l4.2,5C100.67,86.31,108.67,81.31,116.77,76.61Z"
        />
      </g>
      <path
        style={cls2}
        d="M381,73.11,422.17,44a295.56,295.56,0,0,0-59.1-21.6l-27.9,31.4A288.23,288.23,0,0,1,381,73.11Z"
      />
      <g style={cls4}>
        <path
          style={cls2}
          d="M87.17,95.81l-3.8-4.6a272.51,272.51,0,0,0-20.6,19.6l3,2.4C72.67,107.11,79.77,101.31,87.17,95.81Z"
        />
      </g>
      <path
        style={cls2}
        d="M429.17,47.61l-41.3,29.2a302.21,302.21,0,0,1,50.1,35.7l53.7-20.9A299.43,299.43,0,0,0,429.17,47.61Z"
      />
      <g style={cls4}>
        <path style={cls2} d="M57.77,115.91a339,339,0,0,0-29,36.5A295.78,295.78,0,0,1,60.47,118Z" />
      </g>
      <g style={cls5}>
        <path
          style={cls2}
          d="M203.07,25.81,202,45.61a276.24,276.24,0,0,1,31.8-4l6.9-24.2A335.64,335.64,0,0,0,203.07,25.81Z"
        />
      </g>
      <g style={cls3}>
        <path
          style={cls2}
          d="M241.17,41.21c3.6-.1,7.3-.2,11-.2,8.7,0,17.4.4,25.9,1.2l15.6-28.6a311.54,311.54,0,0,0-45.5,2.7Z"
        />
      </g>
      <g style={cls5}>
        <path style={cls2} d="M161.37,56.41a272.38,272.38,0,0,1,33.5-9.4L196,28a300.05,300.05,0,0,0-37.3,14.5Z" />
      </g>
    </g>
    <g id="Needle" style={cls3}>
      <path
        style={cls2}
        d="M235.3,172.71a21.17,21.17,0,1,0,19.4,22.8A21.18,21.18,0,0,0,235.3,172.71Zm-2.3,29.8a8.73,8.73,0,1,1,9.4-8A8.8,8.8,0,0,1,233,202.51Z"
      />
      <path
        style={cls2}
        d="M300.5,81.11c-2.6,1.8-5,3.7-7.5,5.6l-9.3,14.8L265,131l-18.7,29.5-4.7,7.4-2.3,3.7a11.27,11.27,0,0,1-1.2,1.8,5.17,5.17,0,0,0-1.2,1.8c-.7,3-1.3,6-1.9,9.1a2.77,2.77,0,0,0-.1.9,8.59,8.59,0,0,1,6.1,3.9,5.58,5.58,0,0,1,.8-.5c2.6-1.8,5-3.7,7.5-5.6a4.53,4.53,0,0,0,1.1-1.9,18.58,18.58,0,0,1,1.1-1.9l2.3-3.7,4.7-7.4,18.7-29.5,18.7-29.5,9.3-14.8c.7-3,1.3-6.1,1.9-9.2s1-6.2,1.4-9.4C305.7,77.51,303,79.21,300.5,81.11Z"
      />
    </g>
    <line style={cls2} x1="679" y1="80.11" x2="267.42" y2="14.43" />
  </svg>
);

export default Performance;
